<template>
  <div>
    <!-- 搜索 -->
    <content-show :list="dataList" @refreshData="getMyTopic()"></content-show>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :hide-on-single-page="true"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :hide-on-single-page="true"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getTopicTetails,
  topiclike_num,
  topiccollent_num,
} from "../../api/hostlist";
import { timeQuantum } from "../../util/timeQuantum";
import ContentShow from "../contentshow/ContentShow";
export default {
  components: { ContentShow },
  name: "Hotlist",
  data() {
    return {
      dataList: [],
      query: {
        pageNum: 1,
        pageSize: 5,
        uid: localStorage.getItem("uid"),
      },
      pageTotal: 0,
      isShow: true,
    };
  },
  created() {
    this.getMyTopic();
  },
  methods: {
    getMyTopic() {
      // console.log("获取数据");
      getTopicTetails(this.query).then((res) => {
        console.log(res);
        if (res.code == 200) {
          let list = res.data.list;
          // 分页数据
          this.pageTotal = res.data.total;

          // 获取话题内容的文本（用来简略展示）
          var d = document.createElement("div");
          for (let index = 0; index < list.length; index++) {
            d.innerHTML = list[index].content;
            let text = d.innerText;
            if (text.length > 80) {
              list[index].text = text.slice(0, 80) + "...";
            } else {
              list[index].text = text.slice(0, 40) + "...";
            }

            list[index].id = list[index].tid;
            list[index].tag = false;
            // 评论展示
            list[index].disShow = true;

            // 修改时间的展示方式
            list[index].createtime = timeQuantum(list[index].createtime);
          }
          this.dataList = list;
          console.log(this.dataList);
        }
      });
    },
    handlePageChange(val) {
      this.$set(this.query, "pageNum", val);
      this.getMyTopic();
    },
  },
};
</script>

<style>
.pagination {
  margin: 0px auto;
  padding: 20px 0px;
  text-align: center;
  background-color: #fff;
}
</style>